<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo2-15</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>银行账户余额变更通知</h3>
        <p>账号:3001237890122</p>
        <p>余额为:{{count}}</p>
        支取人民币:<input type="text" v-model="money"/>&nbsp;&nbsp;
        <button type="button" @click="changeMoney()">支取{{money}}</button>
        <p>支取后余额为:{{count}}元</p>
        <h3>以下是支出明细帐</h3>
        {{detail}}
        <hr>
    </div>
</body>
<script type="text/javascript">
    const appCom = {
        data(){
            return {
                count: 10000,   //余额
                money: 500, //取款记录
                record:[]   //取款金额记录
            }
        },
        //侦听器
        watch: {
            //侦听count(余额)的变化,提示账户余额变更
            count(newValue,oldValue){
                alert('账户余额由:'+oldValue+'变为'+newValue+'元!');
            }
        },
        //方法
        methods:{
            //取款
            changeMoney(){
                if(this.money<=0){
                    alert('请输入正确取款金额!');
                    return;
                }
                if(this.money>this.count){
                    alert('余额不足,请重新输入取款金额!');
                    return;
                }
                //余额减少
                this.count = this.count - this.money;
                //记录取款金额
                this.record.push(this.money);
            }
        },
        //计算属性
        computed:{
            //返回取款详细记录,当record值发生变化时,自动调用,并更新detail的值
            detail(){
                let str ='';
                for(let i=0;i<this.record.length;i++){
                    str = str+'第'+(i+1)+'次取款:'+this.record[i]+'元';
                }
                return str;
            }
        }
    };
    Constapp=Vue.createApp(appCom).mount("#app");
</script>
</html>